<template>
	<!-- 设备列表 -->
	<div class="content" v-if="is_show == 0">
		<div class="content-top">
			充电机管理_充电机查询
		</div>
		<div class="content-search">
			<el-form inline :model="form" class="demo-form-inline" style="margin-top: 20px;">
				<el-form-item label="名称：">
					<el-input placeholder="请输入名称" v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="编码：">
					<el-input placeholder="请输入编码" v-model="form.code"></el-input>
				</el-form-item>
				<el-form-item label="所属站点：">
					<el-select placeholder="请选择站点" v-model="form.stationId">
                        <el-option
							v-for="item in station_list"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
                <el-form-item label="状态：">
					<el-select placeholder="请选择状态" v-model="form.status">
                         <el-option
							v-for="item in statusList"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
            <el-form-item>
				<el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="content-operation">
			<el-button type="primary" @click="addModular" icon="el-icon-plus">添加模块</el-button>
			<el-button type="primary" @click="realTimeMonitoring" icon="el-icon-video-camera">实时监控</el-button>
		</div>
        <div class="content-table">
			<el-table :data="chargerList" show-header stripe style="width: 100%;">
				<el-table-column label="名称" align="center" width="200">
					<template slot-scope="scope">
                        {{scope.row.name}}
					</template>
				</el-table-column>
				<el-table-column label="编码" width="200" align="center">
					<template slot-scope="scope">
                       {{scope.row.code}}
					</template>
				</el-table-column>
				<el-table-column label="货架号" align="center" width="200">
					<template slot-scope="scope">
                       {{scope.row.shelfCode}}
					</template>
				</el-table-column>
				<el-table-column label="所属站点" align="center">
					<template slot-scope="scope">
                       {{scope.row.stationName}}
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center">
					<template slot-scope="scope">
                        {{textConversion(scope.row.status)}}
					</template>
				</el-table-column>
				<el-table-column label="IP地址" width="200" align="center">
					<template slot-scope="scope">
                        {{scope.row.ipAddress}}
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="200" align="center">
					<template slot-scope="scope">
						<el-button type="text" @click="clickDetail(scope.row)" size="small"><i class="el-icon-view"></i>详情</el-button>
						<el-button @click="handleClick(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
						<el-button @click="handleDelete(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content-page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
			 :page-size=limit layout="prev, pager, next, jumper" :total=total>
			</el-pagination>
		</div>
        <template v-if="is_add">
			<div class="all-screen"></div>
			<div class='add-box'>
				<ChargerAdd @saveAdd='saveAdd'></ChargerAdd>
			</div>
		</template>
		<template v-if="is_edit">
			<div class="all-screen"></div>
			<div class='add-box'>
				<ChargerEdit @isEdit='isEdit' :id="id"></ChargerEdit>
			</div>
		</template>
	</div>
	<ChargerDetail v-else-if="is_show == 1" @isDetail="isDetail" :id="id"></ChargerDetail>
	<ChargerMonitor v-else @isMonitor="isMonitor"></ChargerMonitor>
</template>

<script>
    import Global from '@/components/Global.vue'
	import ChargerAdd from '@/components/charger/ChargerAdd.vue'
	import ChargerDetail from '@/components/charger/ChargerDetail.vue'
	import ChargerMonitor from '@/components/charger/ChargerMonitor.vue'
	import ChargerEdit from '@/components/charger/ChargerEdit.vue'
	export default {
		components: {
			ChargerAdd: ChargerAdd,
			ChargerDetail: ChargerDetail,
			ChargerMonitor: ChargerMonitor,
			ChargerEdit: ChargerEdit
		},
		props:['power'],
		data() {
			return {
                form:{
					name:'',
					code:'',
					status:'',
					stationId:''
				},
                page:1,
                limit:10,
                total:1,
				is_add:false,
				is_edit:false,
				chargerList:[],
				station_list:[],
				is_show:0,
				id:'',
				statusList:[{id:'',name:'请选择状态'},{id:0,name:'正常'},{id:1,name:'异常'},{id:2,name:'离线'}],
				statusList1:[{id:0,name:'待机'},{id:1,name:'充电中'},{id:2,name:'充电完成'},{id:3,name:'故障'},{id:null,name:'离线'}],

				
			}
		},
		mounted() {
			this.get_charger_list()
			this.get_station_list()
		},
		methods: {
			textConversion(idx){
				for(let item of this.statusList1){
					if(item.id == idx){
                      return item.name
					}
				}
			},
            handleSizeChange(val) {
				
			},
			handleCurrentChange(val) {

			},
			handleClick(row) {
			  this.id = row.id
			  this.is_edit = true
            },
            saveAdd(type){
				if (type == 2) {
					this.get_charger_list();
				}
                this.is_add = false
            },
            addModular(){
                this.is_add = true
			},
			isDetail(){
				this.is_show = 0
			},
			isMonitor(){
                 this.is_show = 0
			},
			isEdit(type){
				if (type == 2) {
					this.get_charger_list();
				}
                this.is_edit = false
			},
			realTimeMonitoring(){
                this.is_show = 2
			},
			/* 查询充电机 */
            get_charger_list(){
                var self = this
                this.$axios.post(this.$global.serverIp + 'station/equipmentCharger/findPage' , {
                    "limit":self.limit,
					"page":self.page,
					"name":self.form.name,
					"code":self.form.code,
					"stationId":self.form.stationId,
					"status":self.form.status
                }).then(res =>{
                    if(res != ''){
                       self.chargerList = res.data.list
                    }
                })
			},
			/* 换电站列表 */
			get_station_list() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'station/station/findPage', {
						"limit": "10000",
						"page": "1"
					})
					.then(function(res) {
						if (res != '') {
							var list = res.data.list;
							list.splice(0, 0, { 'id': '', 'name': '请选择站点' })
							self.station_list = list
						}
				
					})
			},
			onSearch(){
				this.page = 1
				this.get_charger_list()
			},
			clickDetail(row){
				this.is_show = 1
				this.id = row.id
			},
			handleDelete(row){
              var self = this;
				this.$confirm('此操作将删除该设备, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					$.ajax({
						url: Global.serverIp + 'station/equipmentCharger/delete',
						data: '["' + row.id + '"]',
						xhrFields: {
							withCredentials: true
						},
						beforeSend : function(request) {
							request.setRequestHeader("Authorization", 'Bearer '+localStorage.getItem('token'));
						},
						contentType: 'application/json;charset=utf-8',
						dataType: 'json',
						type: 'delete',
						success: function(res) {
							if (res.code == Global.success_code) {
								console.log(res);
								self.$popup.open("删除成功");
								self.get_charger_list();
							} else {
								self.$popup.open(res.msg);
							}
						},
						error: function(res) {
							if(res.responseJSON.code == '040005'){
								self.$popup.open("登录过期");
							}else{
								self.$popup.open("请求失败");
							}
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
			
        }

	}
	import '@/assets/css/common.css'
</script>
